<template>
  <div>
    <div class="flex-row border-bottom p-3">
      <text>认证增信</text>
      <text class="hint-text">完成认证，您将获得更大额度和通过审批的机会</text>
    </div>

    <div class="flex-row"
         v-for="(nav, index) in navs"
         :key="index">
      <div class="flex align-center p-3"
           v-for="(n, j) in nav"
           :key="`nav-${j}`"
           @click="goDetail(n)">
        <image class="icon-img"
               :src="n.img"></image>
        <text class="title">{{n.title}}</text>
        <text class="badge"
              v-if="n.badge">{{n.badge}}</text>
      </div>
    </div>
  </div>
</template>
<script>
import VmButton from '../../components/vm-button.vue'
import {
  STORAGE_USER,
  STORAGE_FARM
} from '../../plugins/constant'

export default {
  components: { VmButton },
  props: {},
  data() {
    return {
      user: {},
      farm: {},
      related: {},
      provider: {},
      navs: [
        [
          { img: 'bmlocal://assets/credit/credit_icon_07.png', title: '实名认证', badge: '', url: 'user.realname', params: null },
          { img: 'bmlocal://assets/credit/credit_icon_05.png', title: '企业认证', badge: '', url: 'farm.ic', params: null },
          { img: 'bmlocal://assets/credit/credit_icon_08.png', title: '水电认证', badge: '', url: 'serve.power.edit', params: null }
        ],
        [
          { img: 'bmlocal://assets/credit/credit_icon_06.png', title: '产品认证', badge: '', url: 'farm.auth', params: { type: 'product' } },
          { img: 'bmlocal://assets/credit/credit_icon_01.png', title: '用工认证', badge: '', url: 'credit.increase.labor', params: null },
          { img: 'bmlocal://assets/credit/credit_icon_02.png', title: '保单认证', badge: '', url: 'serve.insurance', params: null }
        ],
        [
          { img: 'bmlocal://assets/credit/credit_icon_03.png', title: '政策支持', badge: '', url: 'credit.increase.policy', params: null },
          { img: 'bmlocal://assets/credit/credit_icon_09.png', title: '会计认证', badge: '', url: 'serve.insurance.apply', params: null },
          { img: '', title: '', badge: '' }
        ]
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getStorage()
  },
  methods: {
    getStorage() {
      this.user = this.$storage.getSync(STORAGE_USER) || {}
      this.farm = this.$storage.getSync(STORAGE_FARM) || {}

      this.$router.getParams().then(res => {
        this.related = res && res.related || {}
        this.provider = res && res.provider || {}
        if (this.related.customer_related_id) {
          const params = {
            customer_id: this.farm.id,
            customer_related_id: this.related.customer_related_id
          }
          this.navs[0][2].params = { ...params }
          this.navs[1][1].params = { ...params }
          this.navs[2][0].params = { ...params }
        }
      })

      if (+this.user.isAuth === 1) {
        this.navs[0][0].badge = '已认证'
        this.navs[0][0].url = ''
      }
      if (this.farm.id) {
        this.getIc()
      }
    },
    getIc() {
      this.$http({
        method: 'GET',
        name: 'industrial.farm.ic',
        data: {
          farmId: this.farm.id
        }
      }).then(res => {
        this.navs[0][1].badge = res && res.registerNo ? '已认证' : ''
        this.navs[0][1].params = res && res.registerNo ? res : null
      })
    },
    goDetail(nav) {
      if (!nav.url) { return }
      const router = { name: nav.url }
      if (nav.params) { router.params = nav.params }
      this.$nav.open(router)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.flex-row {
  flex-direction: row;
}
.flex {
  flex: 1;
}
.align-center {
  align-items: center;
}
.p-3 {
  padding: 30px;
}
.border-bottom {
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}

.icon-img {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}
.title {
  text-align: center;
}
.hint-text {
  color: #999;
  font-size: 26px;
  margin-top: 5px;
  margin: 5px;
}
.badge {
  position: absolute;
  top: 20px;
  right: 0;
  font-size: 22px;
  color: #fff;
  background-color: #f00;
  border-radius: 20px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 2px;
  padding-bottom: 2px;
}
</style>
